<template>
    <!-- 详情页面title组件 -->
    <div class="yc-common-title">
        <svg-icon v-if="icon!==''" :icon-class="icon" class="icon m-r5"/>
        <div v-else class="line m-r10"></div>
        <div class="title-name">
            {{titleName}}
        </div>
        <slot name='rightCnBox'></slot>
    </div>
</template>

<script setup>
const props = defineProps({
    icon:{
        type:String,
        default: ''
    },
    titleName: {
        type: String,
        required: true,
        default: "",
    }
})
</script>

<style lang="scss" scoped>
.yc-common-title {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    font-family: SourceHanSansMedium;
    .icon{
        width: 18px;
        height: 18px;
    }
    .line {
        width: 8px;
        height: 20px;
        background: $title-sm-color;
    }
    .title-name {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        font-weight: bold;
        color: $title-big-color;
    }
}
</style>